<template>
	<view class="checkoutCounter" :class="equipment">
		<view class="checkoutCounter_orderNumber" v-if="res">
			订单编号：{{res.payinfo.ordersn}}
		</view>
		<view class="checkoutCounterBalance" v-if="pay_type === '20'">
			<!-- <p>YMD通证：<span>{{res.ymd}}</span>个</p> -->
		</view>
		<view class="checkoutCounterBalance" v-if="pay_type === '5'">
			<p>余额：<span>{{res.credit2}}</span>元</p>
		</view>
		<view class="checkoutCounterBalance" v-if="pay_type === '10'">
			<p>余额：<span>{{res.credit2}}</span>元</p>
			<!-- <p>M积分余额：<span>{{res.mjf}}</span>个</p> -->
		</view>
		<view class="checkoutCounterBalance" v-if="pay_type === '15'">
			<p>余额：<span>{{res.credit2}}</span></p>
			<!-- <p>贡献值余额：<span>{{res.qyjf}}</span>个</p> -->
		</view>
		<!--   //5  直供专区   10热销专区   15兑换专区   20生态专区 -->
		<view class="checkoutCounter_box" v-if="res">
			<image src="@/static/home/yueimage.png" v-if="pay_type === '5'" mode="widthFix"></image>
			<image src="@/static/home/YMDimage.png" v-if="pay_type === '20'" mode="widthFix"></image>
			<image src="@/static/home/zuhezhifu.png" v-if="pay_type === '10' || pay_type === '15'" mode="widthFix">
			</image>
			<view class="checkoutCounter_box_text">
				<p>订单总额：{{res.real_money}}</p>
				<p>立即支付{{res.pay_button}}</p>
			</view>
		</view>

		<!-- <view class="checkoutCounter_an" @click="show = true">
			立即支付
		</view> -->



		<view class="app_bottom_agree_with_the_protocol" v-if="pay_type === '15'" @click="qianshuxieyiFun">
			<view class="circle" :style="qianmingxieyi?'background-color:#ff3232;':''">
				<uni-icons :size="15" type="checkmarkempty" color="#fff"></uni-icons>
			</view>
			请详细阅读认种协议并签名同意
		</view>


		<view class="checkoutCounter_an" @click="dialogOpne">
			{{ pay_type === '15'?'确认':'立即支付'}}
		</view>



		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="取消" confirmText="确定" title="温馨提示" content="确认支付订单吗？"
				@confirm="order_pay_completeFun" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>


		<!-- 	<view class="pay_password">
			<u-keyboard mode="number" @change="valChange" @backspace="backspace" :dotDisabled="true"
				@cancel="show = !show,value = ''" @confirm="order_pay_completeFun" :show="show">
				<slot name="default">
					<p style="padding: 20rpx;text-align: center;">请输入交易密码</p>
					<u-code-input v-model="value" :disabledKeyboard='true' mode="line"
						style="padding: 20rpx;"></u-code-input>
				</slot>
			</u-keyboard>
		</view> -->
	</view>
</template>

<script>
	import {
		order_pay,
		order_pay_complete,
		api_index_get_real_name
	} from '@/api/home.js'
	import {
		member
	} from '@/api/member.js'
	export default {
		data() {
			return {
				openid: '',
				res: '',
				pay_type: '',
				show: false,
				value: '',
				qianmingxieyi: '',
				real_status: ''
			};
		},
		onLoad(e) {
			console.log(e);
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.memberFun();
					this.order_payFun({
						openid: res.data,
						pay_type: e.pay_type,
						id: e.Corderid
					});
					this.pay_type = e.pay_type;
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		onShow() {
			uni.getStorage({
				key: 'qianming',
				success: (res) => {
					this.qianmingxieyi = res.data;
				}
			});
		},
		methods: {
			async memberFun() {
				let data = await member(this.openid);
				this.api_index_get_real_nameFun(data.mobile)
			},
			api_index_get_real_nameFun(mobile) {
				let _this = this;
				uni.request({
					url: 'http://admin.zhongzihuacai.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=api.index.get_real_name&app=1',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						mobile
					},
					success(res) {
						console.log(res);
						_this.real_status = res.data.error;
					}
				})
			},
			qianshuxieyiFun() {
				if (this.real_status === 0) {
					uni.getStorage({
						key: 'qianming',
						success: (res) => {
							this.qianmingxieyi = res.data;
						},
						fail: () => {
							uni.navigateTo({
								url: '/pages/home/checkoutCounter/qianming/qianming'
							})
						}
					});
				} else {
					this.showinteraction('请先实名认证');
				}
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			dialogOpne() {
				this.$refs.alertDialog.open()
			},
			valChange(e) {
				if (this.value.length === 6) {
					return
				} else {
					this.value += e;
				}
			},
			backspace(e) {
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
			},
			async order_payFun(up) {
				let data = await order_pay(up);
				this.res = data;
				console.log(data);
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async order_pay_completeFun() {
				let _this = this;
				let up = {
					openid: this.openid,
					id: this.res.orderid,
					pay_type: this.pay_type,
					type: 'credit',
					xieyi_pic: this.qianmingxieyi
				}
				let data = await order_pay_complete(up);
				uni.removeStorage({
					key: 'qianming',
					success: function(res) {
						console.log(res);
						_this.qianmingxieyi = '';
					}
				})
				if (data.status === 1) {
					uni.reLaunch({
						url: `/pages/home/checkoutCounter/paySuccess/paySuccess?id=${this.res.payinfo.orderid}&result=true`
					})
				} else {
					// this.value = '';
				}
			}
		}
	}
</script>

<style lang="scss">
	.H5 {
		height: calc(100vh - 88rpx);
	}

	.App {
		height: 100vh;
	}

	.checkoutCounter {
		width: 100%;
		display: flex;
		flex-direction: column;
		// padding: 20rpx;

		.app_bottom_agree_with_the_protocol {
			letter-spacing: 5rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: red;
			margin: 20rpx 0;

			.circle {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
				border: 1rpx solid #ccc;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.checkoutCounter_orderNumber {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-top: 1rpx solid #F2F2F2;
			border-bottom: 1rpx solid #F2F2F2;
			font-size: 26rpx;
			padding: 0 22rpx;
			color: #666;
		}

		.checkoutCounterBalance {
			width: 100%;
			// height: 80rpx;
			// border-bottom: 1rpx solid #ccc;
			font-size: 26rpx;
			padding: 0 22rpx;
			color: #666;
			line-height: 50rpx;
			margin-bottom: 30rpx;

			p {
				color: #666;

				span {
					color: #FF5555;
					padding: 0 10rpx 0 0;
				}
			}
		}

		.checkoutCounter_box {
			width: 100%;
			// height: 100rpx;
			padding: 20rpx;
			color: #333;
			font-size: 26rpx;
			margin: 0 auto;
			line-height: 50rpx;
			display: flex;
			border-bottom: 1rpx solid #F2F2F2;
			align-items: center;

			.checkoutCounter_box_text {
				margin-left: 40rpx;
				padding: 0 40rpx;
				position: relative;
			}

			.checkoutCounter_box_text::after {
				content: '';
				width: 2rpx;
				height: 70%;
				position: absolute;
				background-color: #ccc;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}

			image {
				width: 100rpx;
			}
		}


		.checkoutCounter_an {
			width: 80%;
			height: 80rpx;
			background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
			border-radius: 100rpx;
			margin: 30rpx auto;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}
	}
</style>